<template>
  <div class="addPersonal">
    <el-card shadow="hover" class="layout-padding-auto">
      <div style="display: flex">
        <div class="back" @click="goBack">←返回</div>
        <h1>{{ deviceName }}的全部履历列表</h1>
      </div>
      <el-divider />
      <TableSearch :search="state.search" @search="onSearch" />
      <Table
        ref="tableRef"
        v-bind="state.tableData"
        class="table-demo"
        @pageChange="onTablePageChange"
        @listenClick="listenClick"
      >
        <template #default="{ slotData, slotColumn }">
          <div v-if="slotColumn.key === 'careerType'">
            {{ slotData.careerType == 1 ? '维修' : '维保' }}
          </div>
        </template>
      </Table>
      <PersonalDetail
        :personalDialog="personalDialog"
        :personalForm="personalForm"
        @closePersonal="closePersonal"
      >
      </PersonalDetail>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue'
import { useRoute } from 'vue-router'
import routes from '/@/router'
import { Session } from '/@/utils/storage'
import {
  bindFileUrlApi,
  dictionaryList,
  getButtonListByRoleApi
} from '/@/api/publicApi'
import { buttonDisplayOrNot } from '../../utils/buttonBoolean'
const menu = Session.get('menu')
const Table = defineAsyncComponent(
  () => import('/@/components/table/index.vue')
)
const TableSearch = defineAsyncComponent(
  () => import('/@/components/table/search.vue')
)
const PersonalDetail = defineAsyncComponent(
  () => import('./components/PersonalDetail.vue')
)
const route = useRoute()
const id = ref(route.query.id)
const deviceName = ref(route.query.name)
const active = ref(route.query.activeName)
const buttonCodes = ref<any>([])
const goBack = () => {
  routes.push({
    name: 'assetsEquipment',
    query: {
      active: active.value
    }
  })
}
onMounted(() => {
  state.tableData.param.deviceId = id.value
  // 页面加载时
  menu.forEach(async (element: any) => {
    if (element.menuUrl == '/assets/equipment') {
      let res = await getButtonListByRoleApi({
        terminalType: 1,
        menuPid: element.id
      })
      res.data.forEach((item: any) => {
        buttonCodes.value.push(item.buttonCode)
      })
    }
  })
})

// 定义变量内容
const tableRef = ref<RefType>()
const state = reactive<TableDemoState>({
  tableData: {
    flash: false, // 刷新表格
    // 表头内容（必传，注意格式）
    header: [
      { key: 'careerType', colWidth: '', title: '履历类型', type: 'slot' },
      { key: 'startTime', colWidth: '', title: '开始时间', type: 'text' },
      { key: 'endTime', colWidth: '', title: '结束时间', type: 'text' },
      { key: 'orderNum', colWidth: '', title: '关联工单号', type: 'text' },
      { key: 'createUserName', colWidth: '', title: '创建人', type: 'text' },
      { key: 'remark', colWidth: '', title: '备注信息', type: 'text' }
    ],
    columnBtn: [
      {
        name: 'personalDetail',
        text: '履历详情',
        type: 'primary',
        btns: buttonCodes.value,
        btnCode: 'deviceShopAllResumeBtn'
      }
    ],
    // 配置项（必传）
    config: {
      listApi: '/device/mobile/deviceCareer/careerList',
      listHttp: 'post',
      total: 0, // 列表总数
      loading: true, // loading 加载
      noPage: false, // 是否分页
      isSerialNo: false, // 是否显示表格序号
      isSelection: false, // 是否显示表格多选
      isOperate: true, // 是否显示表格操作栏
      isExtend: false, // 是否可以扩展
      operateWidth: '150', //操作栏宽度
      fixed: 'right' //操作栏固定
    },
    // 搜索参数
    param: {
      deviceId: '' // 必传参数，分页的不要传
    }
  },
  // 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
  search: {
    param: [
      {
        label: '履历类型',
        prop: 'careerType',
        placeholder: '设备类型',
        options: [
          { id: '', configValue: '全部' },
          { id: 1, configValue: '维修' },
          { id: 2, configValue: '维保' }
        ],
        type: 'select'
      }
    ],
    reset: true
  }
})
// 初始化列表数据
const getTableData = () => {
  state.tableData.flash = !state.tableData.flash
}
// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
  state.tableData.param = Object.assign({}, state.tableData.param, { ...data })
  // console.log(state.tableData.param);
  state.tableData.flash = !state.tableData.flash
}
// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
  state.tableData.param.pageNum = page.pageNum
  state.tableData.param.pageSize = page.pageSize
  getTableData()
}

const personalDialog = ref(false)
const personalForm = ref({
  id: '',
  orderNum: '',
  title: ''
})
const personalDetail = (row: any) => {
  personalForm.value.id = id.value as any
  personalForm.value.orderNum = row.orderNum
  if (row.careerType == 1) {
    personalForm.value.title = '维修'
  } else {
    personalForm.value.title = '维保'
  }
  personalDialog.value = !personalDialog.value
}

const closePersonal = () => {
  personalDialog.value = !personalDialog.value
}

//定义方法对象 注意定义的方法 必须在上面已经申明 所以建议objFun申明和 listenClick方法 写在页面最下面
const objFun = {
  personalDetail: personalDetail
}
// 监听子级表格  传过来的方法
const listenClick = (name: string, val: any) => {
  objFun[name](val)
}
</script>
<style scoped lang="scss">
.addPersonal {
  font-size: var(--el-font-size-base);

  h1 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 10px;
  }

  .back {
    cursor: pointer;
    color: rgba(140, 140, 140, 1);
    margin: auto 0;
  }
}
.el-divider--horizontal {
  margin: 15px 0;
}
</style>
<style>
.el-button--warning.is-plain {
  --el-button-bg-color: #fdf6ec;
  --el-button-hover-text-color: #e6a23c;
  --el-button-hover-bg-color: #fdf6ec;
}
.el-button--warning.is-plain:hover {
  --el-button-hover-text-color: #fff;
  --el-button-hover-bg-color: #e6a23c;
}
.el-button--danger.is-plain {
  --el-button-bg-color: #fef0f0;
  --el-button-hover-text-color: #f56c6c;
  --el-button-hover-bg-color: #fef0f0;
}
.el-button--danger.is-plain:hover {
  --el-button-hover-text-color: #fff;
  --el-button-hover-bg-color: #f56c6c;
}
</style>
